<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Admin Dashboard with Analytics</title>
<style>
:root {
--primary-gradient: linear-gradient(135deg, #6366f1, #a855f7);
--secondary-gradient: linear-gradient(135deg, #3b82f6, #14b8a6);
--accent-gradient: linear-gradient(135deg, #f59e0b, #ef4444);
--background-gradient: linear-gradient(135deg, #f3f4f6, #e5e7eb);
--card-gradient: linear-gradient(135deg, #ffffff, #f3f4f6);
--text-color: #1f2937;
--text-light: #6b7280;
--shadow-color: rgba(0, 0, 0, 0.1);
--chart-color-1: #6366f1;
--chart-color-2: #3b82f6;
--chart-color-3: #14b8a6;
--chart-color-4: #f59e0b;
}
.dark-mode {
--primary-gradient: linear-gradient(135deg, #4f46e5, #7c3aed);
--secondary-gradient: linear-gradient(135deg, #2563eb, #0d9488);
--accent-gradient: linear-gradient(135deg, #d97706, #dc2626);
--background-gradient: linear-gradient(135deg, #1f2937, #111827);
--card-gradient: linear-gradient(135deg, #374151, #1f2937);
--text-color: #f3f4f6;
--text-light: #9ca3af;
--shadow-color: rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: var(--background-gradient);
color: var(--text-color);
transition: all 0.3s ease;
display: flex;
min-height: 100vh;
}
.sidebar {
width: 250px;
background: var(--primary-gradient);
color: white;
padding: 20px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
box-shadow: 5px 0 15px var(--shadow-color);
transform: translateZ(0);
}
.logo {
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
display: flex;
align-items: center;
}
.logo-icon {
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 10px;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #6366f1;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.menu-item {
padding: 10px;
margin: 5px 0;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: white;
}
.menu-item:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}
.main-content {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
overflow-y: auto;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: var(--card-gradient);
border-radius: 10px;
box-shadow: 0 4px 6px var(--shadow-color);
transition: all 0.3s ease;
}
.search-bar {
padding: 10px;
border: none;
border-radius: 20px;
background-color: var(--background-gradient);
width: 300px;
color: var(--text-color);
transition: all 0.3s ease;
}
.search-bar:focus {
outline: none;
box-shadow: 0 0 0 2px var(--chart-color-1);
}
.user-profile {
display: flex;
align-items: center;
gap: 10px;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--accent-gradient);
transition: all 0.3s ease;
}
.theme-toggle {
background: var(--secondary-gradient);
border: none;
padding: 10px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
color: white;
transition: all 0.3s ease;
}
.theme-toggle:hover {
transform: rotate(180deg);
}
.metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.metric-card {
background: var(--card-gradient);
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px var(--shadow-color);
transition: all 0.3s ease;
transform: translateZ(0);
}
.metric-card:hover {
transform: translateY(-5px) rotateX(10deg);
box-shadow: 0 10px 20px var(--shadow-color);
}
.metric-icon {
font-size: 24px;
margin-bottom: 10px;
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.metric-value {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.metric-label {
color: var(--text-light);
}
.charts-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.chart-container {
background: var(--card-gradient);
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px var(--shadow-color);
transition: all 0.3s ease;
}
.chart-container:hover {
transform: scale(1.02);
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.chart-title {
font-size: 18px;
font-weight: bold;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.table-container {
background: var(--card-gradient);
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px var(--shadow-color);
overflow-x: auto;
transition: all 0.3s ease;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid var(--text-light);
}
th {
background: var(--secondary-gradient);
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
color: white;
}
tr:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.status {
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
}
.status-completed { background: linear-gradient(135deg, #10b981, #059669); color: white; }
.status-pending { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
.status-cancelled { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
@media (max-width: 768px) {
.sidebar {
width: 70px;
}
.logo span, .menu-item span {
display: none;
}
.charts-container {
grid-template-columns: 1fr;
}
.metric-card:hover {
transform: translateY(-5px);
}
}
/* Analytics Styles */
#analytics {
display: none;
}
#analytics:target {
display: block;
}
#analytics:target ~ #dashboard {
display: none;
}
.analytics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.analytics-card {
background: var(--card-gradient);
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px var(--shadow-color);
transition: all 0.3s ease;
}
.analytics-card:hover {
transform: translateY(-5px) rotateX(10deg);
box-shadow: 0 10px 20px var(--shadow-color);
}
.analytics-chart {
height: 200px;
margin-top: 20px;
position: relative;
overflow: hidden;
}
.analytics-bar {
position: absolute;
bottom: 0;
width: 30px;
background: var(--primary-gradient);
transition: height 0.3s ease;
}
.analytics-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--accent-gradient);
transform-origin: left bottom;
}
.analytics-point {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--chart-color-3);
}
.analytics-donut {
width: 150px;
height: 150px;
border-radius: 50%;
background: conic-gradient(
var(--chart-color-1) 0deg 90deg,
var(--chart-color-2) 90deg 180deg,
var(--chart-color-3) 180deg 270deg,
var(--chart-color-4) 270deg 360deg
);
margin: 0 auto;
transition: all 0.3s ease;
}
.analytics-donut:hover {
transform: scale(1.1) rotate(10deg);
}
.analytics-donut::before {
content: "";
display: block;
width: 60%;
height: 60%;
background: var(--card-gradient);
border-radius: 50%;
position: relative;
top: 20%;
left: 20%;
}
</style>
</head>
<body>
<aside class="sidebar">
<div class="logo">
<div class="logo-icon">TA</div>
<span>TailAdmin</span>
</div>
<nav>
<a href="#dashboard" class="menu-item">📊 <span>Dashboard</span></a>
<a href="#analytics" class="menu-item">📈 <span>Analytics</span></a>
<div class="menu-item">📄 <span>Reports</span></div>
<div class="menu-item">👥 <span>Users</span></div>
<div class="menu-item">⚙️ <span>Settings</span></div>
</nav>
</aside>
<main class="main-content">
<header class="header">
<input type="text" class="search-bar" placeholder="Search...">
<div class="user-profile">
<div class="user-avatar"></div>
<span>John Doe</span>
<button class="theme-toggle" onclick="document.body.classList.toggle('dark-mode')">🌓</button>
</div>
</header>
<!-- Analytics Section -->
<section id="analytics">
<h1 class="chart-title">Analytics Overview</h1>
<div class="analytics-grid">
<div class="analytics-card">
<h2 class="chart-title">Website Traffic</h2>
<div class="analytics-chart">
<div class="analytics-bar" style="height: 60%; left: 10%;"></div>
<div class="analytics-bar" style="height: 80%; left: 25%;"></div>
<div class="analytics-bar" style="height: 40%; left: 40%;"></div>
<div class="analytics-bar" style="height: 100%; left: 55%;"></div>
<div class="analytics-bar" style="height: 75%; left: 70%;"></div>
<div class="analytics-bar" style="height: 90%; left: 85%;"></div>
</div>
</div>
<div class="analytics-card">
<h2 class="chart-title">Conversion Rate</h2>
<div class="analytics-chart">
<div class="analytics-line" style="transform: rotate(30deg) scaleY(20);"></div>
<div class="analytics-point" style="bottom: 20%; left: 10%;"></div>
<div class="analytics-point" style="bottom: 40%; left: 25%;"></div>
<div class="analytics-point" style="bottom: 30%; left: 40%;"></div>
<div class="analytics-point" style="bottom: 60%; left: 55%;"></div>
<div class="analytics-point" style="bottom: 50%; left: 70%;"></div>
<div class="analytics-point" style="bottom: 80%; left: 85%;"></div>
</div>
</div>
<div class="analytics-card">
<h2 class="chart-title">User Demographics</h2>
<div class="analytics-chart">
<div class="analytics-donut"></div>
</div>
</div>
</div>
<div class="table-container">
<h2 class="chart-title">Top Performing Pages</h2>
<table>
<thead>
<tr>
<th>Page</th>
<th>Views</th>
<th>Avg. Time on Page</th>
<th>Bounce Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>/home</td>
<td>45,678</td>
<td>2m 34s</td>
<td>23%</td>
</tr>
<tr>
<td>/products</td>
<td>34,567</td>
<td>3m 12s</td>
<td>18%</td>
</tr>
<tr>
<td>/blog</td>
<td>23,456</td>
<td>4m 05s</td>
<td>15%</td>
</tr>
<tr>
<td>/about</td>
<td>12,345</td>
<td>1m 48s</td>
<td>35%</td>
</tr>
<tr>
<td>/contact</td>
<td>6,789</td>
<td>1m 23s</td>
<td>40%</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Dashboard Section -->
<section id="dashboard">
<section class="metrics">
<div class="metric-card">
<div class="metric-icon">👁️</div>
<div class="metric-value">$3,456K</div>
<div class="metric-label">Total Views</div>
</div>
<div class="metric-card">
<div class="metric-icon">💰</div>
<div class="metric-value">$45.2K</div>
<div class="metric-label">Total Profit</div>
</div>
<div class="metric-card">
<div class="metric-icon">📦</div>
<div class="metric-value">2,450</div>
<div class="metric-label">Total Products</div>
</div>
<div class="metric-card">
<div class="metric-icon">👥</div>
<div class="metric-value">3,456</div>
<div class="metric-label">Total Users</div>
</div>
</section>
<section class="charts-container">
<div id="revenue-chart"></div>
<div id="user-growth-chart"></div>
</section>
<section class="table-container">
<h2 class="chart-title">Recent Orders</h2>
<table>
<thead>
<tr>
<th>Order ID</th>
<th>Customer</th>
<th>Product</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>John Doe</td>
<td>Product A</td>
<td>$99.99</td>
<td><span class="status status-completed">Completed</span></td>
</tr>
<tr>
<td>#1235</td>
<td>Jane Smith</td>
<td>Product B</td>
<td>$149.99</td>
<td><span class="status status-pending">Pending</span></td>
</tr>
<tr>
<td>#1236</td>
<td>Bob Johnson</td>
<td>Product C</td>
<td>$199.99</td>
<td><span class="status status-cancelled">Cancelled</span></td>
</tr>
<tr>
<td>#1237</td>
<td>Alice Brown</td>
<td>Product D</td>
<td>$79.99</td>
<td><span class="status status-completed">Completed</span></td>
</tr>
<tr>
<td>#1238</td>
<td>Charlie Davis</td>
<td>Product E</td>
<td>$129.99</td>
<td><span class="status status-pending">Pending</span></td>
</tr>
</tbody>
</table>
</section>
</section>
</main>
<script type="module">
import { createRoot } from 'react-dom/client';
import { RevenueGraph, UserGrowthChart } from './components/dashboard-charts.tsx';
createRoot(document.getElementById('revenue-chart')).render(<RevenueGraph />);
createRoot(document.getElementById('user-growth-chart')).render(<UserGrowthChart />);
</script>
</body>
</html>